<template>
  <div class="login">
    <h2>登录</h2>
    <input v-model="username" placeholder="用户名" />
    <input v-model="password" type="password" placeholder="密码" />
    <button @click="handleLogin">登录</button>
    <p class="message">{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'LoginPage', // 多单词命名，解决ESLint错误
  data() {
    return {
      username: '',
      password: '',
      message: ''
    }
  },
  
  methods: {
    async handleLogin() {
      // 基础验证：去除空格后检查非空
      const username = this.username.trim();
      const password = this.password.trim();
      
      console.log('前端发送的参数：', { username, password }); 

      if (!username || !password) {
        this.message = '用户名和密码不能为空（不能全为空格）！';
        return;
      }

      try {
        const res = await this.$axios.post('/login', {
          username,
          password
        });
        if (res.data.success) {
          this.message = '登录成功！即将跳转...';
          // 登录成功后跳转（确保路由已配置/user）
          this.$router.push(`/user?name=${username}`);
        } else {
          this.message = '登录失败：' + res.data.msg; // 显示后端返回的具体错误
        }
      } catch (err) {
        // 处理网络错误（如跨域、后端未启动等）
        this.message = '请求失败：' + (err.response?.data?.msg || err.message);
      }
    }
  }
}
</script>

<style>
/* 可保留原样式，建议补充错误信息样式 */
.login {
  margin: 20px auto;
  padding: 20px;
  max-width: 300px;
  border: 1px solid #eee;
  border-radius: 5px;
}
input {
  display: block;
  width: 100%;
  margin: 10px 0;
  padding: 8px;
  box-sizing: border-box;
}
button {
  padding: 8px 15px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background: #359e75;
}
.message {
  color: #f44336; /* 错误信息红色 */
  margin-top: 10px;
}
/* 登录成功时文字变绿色 */
.message.success {
  color: #4caf50;
}
</style>